<template>
  <view>
    <view class="main">
      <view class="top">
        <br />
        <text class="top-text">个人入园凭证</text>
      </view>
      <view class="time">
        <text class="time-text">2024年9月11日  13:30-16:00</text>
      </view>
      <view class="yuyue">
        <text id="yuyue-text" style="font-size: 17px ;font-weight: bold;">预约信息</text>
      </view>
      <view>
        <uni-card class="card">
          <view class="msg">姓名：{{ userInfo[0].name }}</view>
          <br />
          <view class="msg">证件类型：{{ userInfo[0].type }}</view>
          <br />
          <view class="msg">证件号码：{{ userInfo[0].number }}</view>
          <br />
          <view class="msg">手机号码：{{ userInfo[0].tel }}</view>
          <br />
          <view class="msg">同行儿童数：{{ userInfo[0].children }}</view>
          <br />
          <view class="msg">同行成人：
            <view class="companions">
              <view v-for="(item, index) in userInfo" :key="index">
                <text>{{ item.name }}</text>
                <!-- 判断是否为最后一个成人，如果不是，则添加“、” -->
                <text v-if="index < userInfo.length - 1">、</text>
              </view>
            </view>
          </view>
        </uni-card>
        <view class="huacao">
          <text class="huacao-text">园区花草，种植不易请爱护</text>
        </view>
      </view>
    </view>
  </view>
  <view class="bottom">
  	<text class="bottom-text1">离凭证消失剩余<text class="bottom-text2">3小时56分钟</text>。可发起新的预约</text>
  </view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { reactive } from 'vue';
	import { ref } from 'vue';
	import card from '../../pages/components/card.vue';

let userInfo = reactive([{
  name: '',
  type: '',
  number: '',
  tel: '',
  children: 0,
  date: '',
  time: ''
}]);

onLoad((options) => {
  if (options.userData) {
    let userInfoData = JSON.parse(decodeURIComponent(options.userData));
    userInfo = userInfoData;
	
    console.log(userInfoData);
    userInfo[0].date = userInfoData[0].date;
    userInfo[0].time = userInfoData[0].time;
  }
});
</script>

<style scoped>
.main {
  margin: 12px;
  width: 351px;
  height: 578px;
  background-image: url("../../static/pingzbg.png");
  background-size: cover;
}
.top-text {
  width: 120px;
  height: 20px;
  opacity: 0.9;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  font-size: 20px;
  color: #000000;
  letter-spacing: 0;
  text-align: center;
  line-height: 20px;
  margin-top: 30px;
}
.huacao {
  margin-top: 60px;
  text-align: center;
}
.huacao-text {
  width: 144px;
  height: 17px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  font-size: 15px;
  color: #5F5F5F;
  letter-spacing: 0;
}
.top {
  text-align: center;
  height: 85px;
}
.time {
  text-align: center;
  position: relative;
  top: -20px;
    margin-left: 70px;
}
.time-text {
  width: 161px;
  height: 17px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  font-size: 12px;
  color: #5F5F5F;
  letter-spacing: 0;
}
.card {
  border-radius: 12px;
}
.bottom {
  text-align: center;
  margin-top: 41px;
  height: 41px;
}
.bottom-text1 {
  color: #5f5f5f;
  font-size: 12px;
  font-face: PingFangSC;
  font-weight: 400;
  line-height: 0;
  letter-spacing: 0;
  paragraph-spacing: 0;
  text-align: left;
}
.bottom-text2 {
  color: #8dcb6d;
  font-size: 12px;
  font-face: PingFangSC;
  font-weight: 400;
  line-height: 0;
  letter-spacing: 0;
  paragraph-spacing: 0;
  text-align: left;
}
.msg {
  font-family: PingFangSC-Regular;
  font-weight: 400;
  font-size: 15px;
  color: #000000;
  letter-spacing: 0;
}
.i {
  color: #5f5f5f;
  font-size: 12px;
  font-face: PingFangSC;
  font-weight: 400;
  line-height: 0;
  letter-spacing: 0;
  paragraph-spacing: 0;
  text-align: left;
  margin-left: 50px;
}
</style>